<div id="settingsGroupRights" style="height:100%">
    <div class="ui-layout-west" id="settingsGroupRightsGroups">
        <div class="ui-layout-center">
            <div class="clearfix tbl settingsGroupRightsGroupsTable" id="settingsGroupRightsGroupsTable"></div>    
        </div>
    </div>
    <div class="ui-layout-center" id="settingsGroupRightsControlAccess">
        <div class="ui-layout-center">
            <div class="clearfix tbl settingsGroupRightsControlAccessTable" id="settingsGroupRightsControlAccessTable"></div>    
        </div>
        <div class="ui-layout-south">
            <button class="small">Reload All</button>    
            <button class="small">Save</button>    
            <button class="small">Cancel</button>
        </div>
    </div>
</div>
<script>
    var SettingsGroupRightsFX = function() {
        var _self = this;
        _self.id = "";
        _self.perform = function() {
            //dodavanje layout-a za parent div
            $("#settingsGroupRights").layout({
                resizable: false,
                closable: false,
                west__size: "200"
            });
            $("#settingsGroupRightsGroups").layout({
                resizable: false,
                closable: false
            });
            $("#settingsGroupRightsControlAccess").layout({
                resizable: false,
                closable: false,
                south__size: "50"
            });
            _self.loadDataForSettingsGRGTable(function(){
                _self.id = $('#settingsGroupRightsGroupsTable .row.data').first().data('id');
                $('#settingsGroupRightsGroupsTable .row.data').first().addClass('selected');
                _self.loadDataForSettingsGRCATable(_self.id);
            });

            $("#settingsGroupRightsControlAccessTable").addScroll();

            window.refreshAndSortTable = _self.refreshSortedTable;
        };
        _self.refreshSortedTable = function(table, columnName, ascDesc, callback){
            _self.table = table;
            _self.request = 621;

            _self.columnName = columnName;
            _self.sortItem = "";
            _self.ascDesc = ascDesc;
            _self.action = "getItems";

            _self.random = Math.random();
            _self.url = "js/tableParams/" +  _self.request + ".json?x=" + random;

            $.get(_self.url, function(response) {
                $(response.desc).each(function(index,value){
                    if(value.title == columnName){
                        _self.sortItem = value.param;
                        return false;
                    }
                });

                var params = {
                    request:  _self.request,
                    action: _self.action,
                    sortItem: _self.sortItem,
                    ascDesc: _self.ascDesc,
                    id: _self.id
                };
                window.tableConstructor.generateTable(params, callback);
            });

        };

        _self.loadDataForSettingsGRGTable = function(callback) {
            var params = {
                request: 620,
                action: "getItems"
            };
            window.tableConstructor.generateTable(params, callback);
        };
        _self.loadDataForSettingsGRCATable = function(id, callback) {
            var params = {
                request: 621,
                action: "getItems",
                id:id
            };
            window.tableConstructor.generateTable(params, callback);
        };
        _self.assignEventHandlers = function(){
            $(document).on("click", "#settingsGroupRightsGroupsTable .row.data", function() {
                _self.id = $(this).data('id');

                $('#settingsGroupRightsGroupsTable .row').removeClass('selected');
                $(this).addClass('selected');

                _self.loadDataForSettingsGRCATable(_self.id);
            });
        };
        _self.clearEventHandlers = function(){
            $(document).off("click", "#settingsGroupRightsGroupsTable .row.data");
        };
    };
    if(!window.sGroupRightsFX){
        window.sGroupRightsFX = new SettingsGroupRightsFX();
        window.sGroupRightsFX.perform();
        window.sGroupRightsFX.clearEventHandlers();
        window.sGroupRightsFX.assignEventHandlers();
    }
    else{
        window.sGroupRightsFX.perform();
        window.sGroupRightsFX.clearEventHandlers();
        window.sGroupRightsFX.assignEventHandlers();
    }
</script>